<template>
  <form id="user-login">
    <div class="u-form-group">
      <input type="name" placeholder="用户名" v-model="username"/>
    </div>
    <div class="u-form-group">
      <input type="password" placeholder="密码" v-model="password"/>
    </div>
    <div class="u-form-group">
      <button type="button" id="btn-login" @click="login">登录</button>
    </div>
    <button type="button" id="btn-login" @click="test">登录</button>
  </form>
</template>

<script>
import axios from "axios";
axios.defaults.withCredentials=true;
export default {
  name: "Login",
  data(){
    return{
      username:"",
      password:""
    }
  },
  methods:{
    login(){
      if (this.username == "" || this.password == "") {
        alert("请填写完整信息");
        return;
      }
      // 发送 POST 请求
      axios({
        method: "get",
        url: "http://127.0.0.1:8080/users/login",
        params: {
          username: this.username,
          password: this.password
        }
      }).then(
        (response) => {
            if(response.data.state==200){
                alert("登录成功！")
            }
            else{
                alert("登录失败!"+response.data.message)
            }

          console.log("请求成功了", response);
        },
        (error) => {
          alert("请求失败 ", error.message);
        }
      )
    },
    test(){
      axios({
        method: "get",
        url: "http://127.0.0.1:8080/product/getProductNum"
      }).then(
        (response) => {

          console.log("请求成功了", response);
        },
        (error) => {
          alert("请求失败 ", error.message);
        }
      )
    }
  }
};

</script>

<style scoped>
.u-form-group {
  width: 100%;
  margin-bottom: 10px;
}

.u-form-group input[type="name"],
.u-form-group input[type="password"],
.u-form-group input[type="email"] {
  width: calc(50% - 22px);
  height: 45px;
  outline: none;
  border: 1px solid #ddd;
  padding: 0 10px;
  border-radius: 2px;
  color: #333;
  font-size: 0.8rem;
  -webkit-transition: all 0.1s linear;
  -moz-transition: all 0.1s linear;
  transition: all 0.1s linear;
}

.u-form-group input:focus {
  border-color: #358efb;
}

.u-form-group button {
  width: 50%;
  background-color: #1cb94e;
  border: none;
  outline: none;
  color: #fff;
  font-size: 14px;
  font-weight: normal;
  padding: 14px 0;
  border-radius: 2px;
  text-transform: uppercase;
}
</style>